<!--
  椭圆下拉选择

  props：
    activeColor string 选中颜色 default：#3385FF
    defaultValue number|string 默认选中，不传或者为空字符串则默认选中第一项
    options array 下拉选项参数 参数示例：https://youzan.github.io/vant/v2/#/zh-CN/dropdown-menu#option-shu-ju-jie-gou
    其它参数可查看：https://youzan.github.io/vant/v2/#/zh-CN/dropdown-menu

  event:
    change 选中变化
-->
<template>
  <div>
    <van-dropdown-menu
      :active-color="activeColor"
      v-bind="$attrs"
    >
      <van-dropdown-item
        :options="options"
        v-bind="$attrs"
        v-model="value"
        @change="handleChange"
      >
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, Button } from "vant";

export default {
  name: "qm-drowdown",
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Button.name]: Button
  },
  props: {
    activeColor: {
      type: String,
      default: "#3385FF"
    },
    defaultValue: {
      type: [Number, String]
    },
    options: {
      type: Array,
      default: () => [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ]
    }
  },
  data() {
    return {
      value: ""
    }
  },
  created() {
    if (this.defaultValue !== 0 && !this.defaultValue) {
      this.value = this.options.length ? this.options[0].value : "";
    } else {
      this.value = this.defaultValue;
    }
  },
  methods: {
    handleChange(val) {
      this.$meit("change", val);
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-dropdown-menu__bar {
  height: calc(60px * var(--ratio));
  border-radius: calc(30px * var(--ratio));
  box-shadow: none;
}
::v-deep .van-dropdown-menu__item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-fill-background);
  border-radius: calc(30px * var(--ratio));

  .van-dropdown-menu__title {
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-title);
    font-size: var(--font-size-subcontent);

    .van-ellipsis {
      margin-right: calc(10px * var(--ratio));
    }

    &::after {
      margin: 0;
      position: static;
      width: calc(18px * var(--ratio));
      height: calc(10px * var(--ratio));
      background-image: url("../../../../static/img/list/lower-triangle.svg");
      background-size: contain;
      background-repeat: no-repeat;
      border: none;
      opacity: 1;
      transform: none;
    }
  }
  .van-dropdown-menu__title--active {
    color: var(--color-brand);

    &::after {
      background-image: url("../../../../static/img/list/lower-triangle2.svg");
      transform: rotateZ(-180deg);
    }
  }
}
</style>
